<template>
  <view>
    <view class="search-box">
    </view>
    <view class="indexed-list" :style="{ height: height + 'px' }">
      <uni-indexed-list
          :options="list"
          :showSelect="showSelect"
          @click="bindClick"
      ></uni-indexed-list>
    </view>
  </view>
</template>

<script>
import city from "./china-city";
import store from "../../store";

export default {
  components: {},
  data() {
    return {
      list: city.list,
      height: 0,
      searchValue: "",
      showSelect: true,
    };
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    bindClick(e) {
      store.commit('changeSearchCity', e.item.name);
      uni.navigateBack();
    },
    getHeight() {
      let that = this;
      uni.getSystemInfo({
        success: function (res) {
          let obj = uni.createSelectorQuery().select(".search-box");
          obj
              .boundingClientRect(function (data) {
                // data - 各种参数
                that.height = res.windowHeight - data.height;
              })
              .exec();
        },
      });
    },
  },
};
</script>

<style lang="scss">
.search-box {
  position: sticky;
  top: 0;
  z-index: 99;
  border-bottom: 1px solid #efefef;
}

.indexed-list {
  position: relative;
  z-index: 999;
}
</style>
